<template>
    <div class="ranks-container">
        <div class="rank-title">
            <span>CEX Inflow</span>
            <JButtons :list="btns" v-model="inIndex" @change="(e) => onTypeChange('in', e)"></JButtons>
        </div>
        <div class="rank-lodding" v-if="inLoding">
            <JLoding></JLoding>
        </div>
        <div class="rank-empty" v-if="inData.length == 0">
            <JEmpty></JEmpty>
        </div>
        <div v-else>
            <div class="rank-items d-flex" v-for="(item, index) in inData" :key="index">
                <div class="rank-top" :style="rankBg(index)">{{ index + 1 }}</div>
                <img :src="getImg(item.symbol)" class="rank-logo" />
                <span class="rank-name coin-link" @click="onDetail(item)">{{ item.symbol }}</span>
                <span class="rank-line">
                    <v-progress-linear :model-value="item.plan" color="#0DCB81" bg-color="#25282F"
                        :height="20"></v-progress-linear>
                </span>
                <span class="rank-price"> ${{ item.usd }}</span>
            </div>
        </div>

    </div>
    <div class="ranks-container">
        <div class="rank-title">
            <span>CEX Outflow</span>
            <JButtons :list="btns" v-model="outIndex" @change="(e) => onTypeChange('out', e)"></JButtons>
        </div>
        <div class="rank-lodding" v-if="outLoding">
            <JLoding></JLoding>
        </div>
        <div class="rank-empty" v-if="outData.length == 0">
            <JEmpty></JEmpty>
        </div>
        <div v-else>
            <div class="rank-items d-flex" v-for="(item, index) in outData" :key="index">
                <span class="rank-top" :style="rankBg(index)">{{ index + 1 }}</span>
                <img :src="getImg(item.symbol)" class="rank-logo" />
                <span class="rank-name coin-link" @click="onDetail(item)">{{ item.symbol }}</span>
                <span class="rank-line">
                    <v-progress-linear :model-value="item.plan" color="#F6475D" bg-color="#25282F"
                        :height="20"></v-progress-linear>
                </span>
                <span class="rank-price">
                    ${{ item.usd }}
                </span>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, StyleValue, onMounted } from "vue";
import { URL_CAPITAL_TOP } from '@/comm/api';
import JNumber from "@/components/j-number/index.vue"
import { url } from "inspector";
import { get } from "@/comm/request";
import { useTokens } from "@/stores/tokens";
import JEmpty from "@/components/j-empty/index.vue";
import { formatBigNumber, scientificToDecimal } from "@/comm/format";
import Item from "@/components/star/item.vue";
import JLoding from "@/components/j-loding/index.vue";
import JButtons from "@/components/j-buttons/index.vue";
const inLoding = ref(true)
const outLoding = ref(true)
const inData = ref<any>([]);
const outData = ref<any>([]);
const tokens = useTokens();
const btnsData = [
    {
        label: "H",
        value: "H"
    },
    {
        label: "D",
        value: "D"
    }
];
const btns = ref(btnsData);
const inIndex = ref(btns.value[0]);
const outIndex = ref(btns.value[0]);
const getImg = (str: string) => {
    return tokens.getImg(str);
};

const rankBg = (index: number) => {
    let styleObject: StyleValue = {
    }
    if (index == 0) {
        styleObject = {
            'background-image': `url('/src/assets/svg/stream/top1.svg')`,
        }
    }
    else if (index == 1) {
        styleObject = {
            'background-image': `url('/src/assets/svg/stream/top2.svg')`,
        }
    }
    else if (index == 2) {
        styleObject = {
            'background-image': `url('/src/assets/svg/stream/top3.svg')`,
        }
    }
    else {
        styleObject = {
            'background-image': `url('/src/assets/svg/stream/topother.svg')`,
        }
    }
    return styleObject
}
const getData = async (type: string, interval: any) => {
    const res: any = await get(URL_CAPITAL_TOP, { type, interval })
    let list: any = []
    if (res?.data.length > 0) {
        list = res?.data
        let max = 0
        list.forEach((item: any) => {
            // item.usd = 
            item.num = +scientificToDecimal(item.totalUsd)
            if (item.num > max) {
                max = item.num
            }
            item.usd = formatBigNumber(item.num, 3)
        });
        list.forEach((item: any) => {
            if (item.totalUsd == max) {
                item.plan = 100
            } else {
                item.plan = (item.num / max) * 100
                if (item.plan < 1) {
                    item.plan = 1
                }
            }
        })
    }
    return list
}
const onDetail = (coin: any) => {
    window.open("/token/" + coin.contractAddress);
};
const initData = async () => {
    inData.value = await getData('in', inIndex.value.value)
    inLoding.value = false
    console.log('获取数据1', inData.value)
    outData.value = await getData('out', outIndex.value.value)
    outLoding.value = false
    console.log('获取数据2', inData.value)
}
const onTypeChange = async (str: string, e: any) => {
    if (str == 'in') {
        inLoding.value = true
        inIndex.value = e
        inData.value = await getData('in', inIndex.value.value)
        inLoding.value = false
    }
    if (str == 'out') {
        outLoding.value = true
        outIndex.value = e
        outData.value = await getData('out', outIndex.value.value)
        outLoding.value = false
    }
}
onMounted(() => {
    initData()
})
</script>


<style lang="less" scoped>
:deep(.v-progress-linear) {
    border-radius: 4px;
}

.ranks-container {
    width: 100%;
    background-color: var(--card);
    padding: 20px 16px 20px 20px;
    border-bottom: 1px dashed #32363F;
    position: relative;
    min-width: 350px;
    
    .rank-empty {
        width: 100%;
    }

    .rank-lodding {
        width: 100%;
        // height: 400px;
    }

    &:last-child {
        border-bottom: none;
    }

    .rank-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--color-2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--font-family);
    }

    .rank-items {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        // justify-content: space-between;
        gap: 6px;

        .rank-top {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            // background-color: aqua;
            font-size: 12px;
            font-weight: 600;
            color: var(--color-2);
        }

        .rank-logo {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        .rank-name {
            width: 50px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            font-family: var(--font-family);

            &:hover {
                text-decoration: underline;
            }
        }

        .rank-line {
            // flex: 1;
            width: 162px;
            background-color: #25282F;
            border-radius: 4px;
        }

        .rank-price {
            flex: 1;
            font-size: 14px;
            font-family: var(--font-family);
        }
    }
}
</style>
